<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
    .mui-content {
        background: #FFF;
    }
    .message_top {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        overflow: hidden;
        background: #FFFFFF;
        width: 100%;
    }
    .mui-control-content {
        height: 100%;
        position: initial;
    }
    div.top-nav-comment {
        width: 100%;
        text-align: center;
    }
    div.top-nav-comment a {
        display: inline-block;
        font-size: 16px;
        color: #333;
        padding: 8px 12px;
        margin: 0 15px 10px 0;
        border-bottom: 2px solid #FFF;
    }
    div.top-nav-comment a.nav-active {
        color: #29bc4f;
        border-bottom: 2px solid #29bc4f;
    }
    .mui-navigate-right .view_span {
        display: block;
        font-size: 0.8rem;
        color: #979797;
    }
    .mui-navigate-right .title {
        display: block;
        font-size: 1.2rem;
        color: #000;
    }
    .mui-table-view:before {
        display: none;
    }
    .mui-table-view:after {
        display: none;
    }
    .mui-table-view-cell:after {
        left: 15px;
        right: 15px;
    }
    .mui-pull-caption {
        background-color: #FFF;
    }
</style>
<div class="mui-content">
    <div style="padding: 10px 10px;" class="message_top">
        <div class="top-nav-comment" id="topNavComment">
            <a class="nav-active" data-target="#item1">评论</a>
            <a data-target="#item2">通知</a>
        </div>
    </div>
    <div>
        <div id="item1" class="mui-control-content mui-active">
            <div class="content-list-wrap">
                <div class="mui-content mui-scroll-wrapper" id="commentListWrap" style="margin-top: 70px">
                    <div class="mui-scroll">
                        <ul class="mui-table-view" id="comment">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="item2" class="mui-control-content">
            <div class="content-list-wrap">
                <div class="mui-content mui-scroll-wrapper" id="noticeListWrap" style="margin-top: 70px">
                    <div class="mui-scroll">
                        <ul class="mui-table-view" id="notice">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 评论 -->
<script type="text/html" id="tpl-comment">
    {{each list as value i}}
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right comment_detail" data-id="{{value.business_id}}" data-type="{{value.business_type}}">
            <span class="title">{{value.business_title}}</span>
            <span class="view_span">{{dataFormat(value.create_time,'yyyy-MM-dd hh:mm')}}</span>
        </a>
    </li>
    {{/each}}
</script>
<!-- 通知 -->
<script type="text/html" id="tpl-notice">
    {{each list as value i}}
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right notice_detail" data-id="{{value.id}}">
            <span class="title">{{value.title}}</span>
            <span class="view_span">{{dataFormat(value.create_time,'yyyy-MM-dd hh:mm')}}</span>
        </a>
    </li>
    {{/each}}
</script>

<script>
    var _messageIndex = 1,message_page = 0,_noticeIndex = 1,notice_page = 0;

    function commentPullUp2Refresh() {
        var _this = this;
        if (_messageIndex < message_page) {
            $.ajax({
                url: _basePath + "/app/member/commentList",
                data: {
                    curPage: _messageIndex + 1,
                },
                dataType: 'json',
                success: function (data) {
                    message_page = data.resultList.totalPage;
                    var _html = template('tpl-comment', data.resultList);
                    $("#comment").append(_html);

                    _messageIndex++;

                    //如果存在数据，则继续添加数据
                    if (_messageIndex < message_page) {
                        _this.endPullupToRefresh(false);
                    } else {
                        _this.endPullupToRefresh(true);
                    }
                }
            });

        } else {
            _this.endPullupToRefresh(true);
        }
    }
    
    function noticePullUp2Refresh() {
        var _this = this;
        if (_noticeIndex < notice_page) {
            $.ajax({
                url: _basePath + "/app/member/notices",
                data: {
                    curPage: _noticeIndex + 1,
                },
                dataType: 'json',
                success: function (data) {
                    notice_page = data.resultList.totalPage;
                    var _html = template('tpl-notice', data.resultList);
                    $("#notice").append(_html);

                    _noticeIndex++;

                    //如果存在数据，则继续添加数据
                    if (_noticeIndex < notice_page) {
                        _this.endPullupToRefresh(false);
                    } else {
                        _this.endPullupToRefresh(true);
                    }
                }
            });

        } else {
            _this.endPullupToRefresh(true);
        }
    }
    

    $(function () {

        mui('#topNavComment').on('tap', 'a', function () {
            $('.mui-control-content').hide();
            $($(this).data('target')).show();

            $('#topNavComment a').removeClass('nav-active');
            $(this).addClass('nav-active');
        });

        //加载评论
        loadComment();
        //加载通知
        loadNotice();

        //评论详情
        mui('body').on("tap", ".comment_detail",function () {
            var _id= $(this).data("id"),_type = $(this).data("type"),pv;
            if(_type == 1){
                pv = "info_detail";
            }else if(_type == 2){
                pv = "comm_detail";
            }else{
                pv = "live_detail";
            }
            var url = _basePath + "app/page?pv=" + pv +"&id=" + _id;
            mui.openWindow({
                url: url
            });
        });
        //通知详情
        mui('body').on("tap", ".notice_detail", function () {
            var _id= $(this).data("id");
            mui.openWindow({
                url: _basePath + "app/page?pv=mine_notice&id="+_id
            });
        });

    });
    
    function loadComment() {
        $.ajax({
            url: _basePath + "/app/member/commentList",
            dataType: 'json',
            success: function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0) {
                    var _html = template('tpl-comment', data.resultList);
                    $("#comment").append(_html);
                    message_page = data.resultList.totalPage;
                    initCommentPullUp();
                }
            }
        });
    }
    
    function loadNotice() {
        $.ajax({
            url: _basePath + "/app/member/notices",
            dataType: 'json',
            success: function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0) {
                    var _html = template('tpl-notice', data.resultList);
                    $("#notice").append(_html);
                    notice_page = data.resultList.totalPage;
                    initNoticePullUp();
                }
            }
        });
    }

    function initCommentPullUp() {
        //初始化上拉加载
        mui('#commentListWrap').pullRefresh({
            up: {
                auto:true,
                contentrefresh: "正在加载...",
                contentnomore: "没有更多数据了",
                callback: commentPullUp2Refresh
            }
        });
    }

    function initNoticePullUp() {
        //初始化上拉加载
        mui('#noticeListWrap').pullRefresh({
            up: {
                auto:true,
                contentrefresh: "正在加载...",
                contentnomore: "没有更多数据了",
                callback: noticePullUp2Refresh
            }
        });
    }

</script>

